import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, message } from 'ant-design-vue';

import { SparkFilesPreview, SparkHtml, SparkImagePreview } from '#/components';

import { useVbenForm } from './form';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'records',
            total: 'total',
            list: '',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        // 树列表配置
        treeConfig: {
          indent: 40,
          transform: false,
          rowField: 'id',
          parentField: 'pid',
          childrenField: 'children',
          hasChildField: 'isLeaf',
        },
        // 工具类配置
        toolbarConfig: {
          // 自定义列
          custom: true,
          // 导出
          export: false,
          // 导入
          import: false,
          // 刷新列表
          refresh: true,
          // 打印
          print: false,
          // 最大化
          zoom: true,
          // 搜索
          search: false,
        },
        // 行配置
        rowConfig: {
          // 鼠标移入高亮显示当前行
          isHover: true,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return row[column.field]
          ? h(SparkImagePreview, {
              imageUrls: row[column.field],
            })
          : h(
              'i',
              {
                style: { fontSize: '12px' },
              },
              '无资源',
            );
      },
    });

    // 在 setupVbenVxeTable 的 configVxeTable 中添加
    vxeUI.renderer.add('CellHtml', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        const htmlContent = row[column.field];

        return htmlContent
          ? h(SparkHtml, {
              btnType: 'link',
              content: row[column.field],
              btnText: '内容预览',
            })
          : h('i', { style: { fontSize: '12px' } }, () => '无内容');
      },
    });

    // 文件预览
    vxeUI.renderer.add('CellFiles', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return row[column.field]
          ? h(SparkFilesPreview, {
              urls: row[column.field],
            })
          : h(
              'i',
              {
                style: { fontSize: '12px' },
              },
              '无资源',
            );
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts, params) {
        const { column, row } = params;
        const { props } = renderOpts;
        const text = props?.text || row[column.field];
        const handleClick = props?.handleClick || handleBtn;
        return h(
          Button,
          { size: 'small', type: 'link', onClick: handleClick },
          { default: () => text },
        );
      },
    });

    // 字典翻译 可以用 cellRender: { name: 'CellDict' },
    vxeUI.renderer.add('CellDict', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        // 从列配置中获取 translateValue 函数
        const translateValue = column.cellRender.attrs.translateValue;
        if (typeof translateValue === 'function') {
          // 调用 translateValue 函数
          return translateValue(params, column.cellRender.attrs.dictCode);
        }
        // 如果没有提供 translateValue 函数，则默认返回单元格值
        return h('span', {}, row[column.field]);
      },
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm,
});

// 默认的按钮实现方法提示
function handleBtn() {
  message.warn('这是一个默认的实现方法,可自定义实现');
}
export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';
